import React from 'react';
import Logo from '../../components/logo/Logo';
import { WingBlank, List, InputItem, WhiteSpace, Radio, Button } from 'antd-mobile'
import styled from 'styled-components'
import { LoginWrapper, LoginTitle } from '../login/style'

const RadioItem = Radio.RadioItem;

class Register extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            worker: true
        }
        this.setStatusWorker = this.setStatusWorker.bind(this);
        this.setStatusBoss = this.setStatusBoss.bind(this);
        this.toLogin = this.toLogin.bind(this);
    }
    render () {
        return (
            <LoginWrapper>
                <Logo></Logo>
                <WingBlank size={'lg'}>
                    <LoginTitle>注册招聘网站</LoginTitle>
                    <List>
                        <InputItem
                            clear
                            placeholder="注册用户名"
                        >用户名</InputItem>
                        <InputItem
                            clear
                            placeholder="注册密码"
                        >密码</InputItem>
                        <InputItem
                            clear
                            placeholder="注册确认密码"
                        >确认密码</InputItem>
                        <WhiteSpace size={'lg'}></WhiteSpace>
                        <RadioItem checked={this.state.worker} onChange={this.setStatusWorker} >我是应聘者</RadioItem>
                        <RadioItem checked={!this.state.worker}  onChange={this.setStatusBoss} >我是招聘者</RadioItem>
                        <WhiteSpace size={'lg'}></WhiteSpace>
                        <WhiteSpace size={'lg'}></WhiteSpace>
                        <WhiteSpace size={'lg'}></WhiteSpace>
                        <Button type={'primary'} style={{backgroundColor: '#00b38a'}}>立即注册，获得高薪机会</Button>
                        <WhiteSpace size={'lg'}></WhiteSpace>
                        <Button style={{backgroundColor: '#f2f2f2', color: '#999'}} onClick={this.toLogin}>返回登录界面</Button>
                    </List>
                </WingBlank>
            </LoginWrapper>
        )
    }
    setStatusWorker () {
        this.setState({
            worker: true
        })
    }
    setStatusBoss () {
        this.setState({
            worker: false
        })
    }
    toLogin () {
        this.props.history.push('/login');
    }
}

export default Register